import { createVisualEditorConfig } from './packages/visual-editor.utils';
import { ElButton, ElInput, ElSelect, ElOption } from 'element-plus';
import { createEditorInputProp, createEditorColorProp, createEditorSelectProp, createEditorTableProp } from './packages/visual-editor-props';
import { NumberRange } from './packages/components/number-range/number-range';
export const visualConfig = createVisualEditorConfig()

visualConfig.registry('text', {
  label: '文本',
  preview: () => '预览文本',
  render: ({ props }) => <span style={{ color: props.color, fontSize: props.size }}>
    {props.text || '渲染文本'}
  </span >,
  props: {
    text: createEditorInputProp('显示文本'),
    color: createEditorColorProp('字体颜色'),
    size: createEditorSelectProp('字体大小', [
      { label: '14px', val: '14px' },
      { label: '18px', val: '18px' },
      { label: '24px', val: '24px' }
    ])
  },
  model: {
    default: '绑定字段'
  }
})

visualConfig.registry('button', {
  label: '按钮',
  preview: () => <ElButton>预览按钮</ElButton>,
  render: ({ props, size, custom }) => <ElButton
    {...custom}
    type={props.type} size={props.size}
    style={{ width: `${size.width}px`, height: `${size.height}px` }} >{
      props.text || '渲染按钮'
    }</ElButton>,
  props: {
    text: createEditorInputProp('显示文本'),
    type: createEditorSelectProp('按钮类型', [
      { label: '基础', val: 'primary' },
      { label: '成功', val: 'success' },
      { label: '警告', val: 'warning' },
      { label: '危险', val: 'danger' },
      { label: '提示', val: 'info' },
      { label: '文本', val: 'text' }
    ]),
    size: createEditorSelectProp('按钮大小', [
      { label: '默认', val: '' },
      { label: '中等', val: 'medium' },
      { label: '小', val: 'small' },
      { label: '极小', val: 'mini' }
    ])
  },
  resize: {
    width: true, height: true
  },
})

visualConfig.registry('input', {
  label: '输入框',
  preview: () => <ElInput modelValue={''} />,
  render: ({ model, size, custom }) => {
    return <ElInput {...custom} {...model.default} style={{ width: `${size.width}px` }} />
  },
  model: {
    default: '绑定字段'
  },
  resize: { width: true }
})

visualConfig.registry('select', {
  label: '下拉框',
  preview: () => <ElSelect modelValue={''} />,
  render: ({ props, model, custom }) => {
    return <ElSelect {...custom} {...model.default} key={(props.options || []).map((opt: any) => opt.value).join(',')}>
      {(props.options || []).map((opt: { label: string; value: string }, index: number) =>
        <ElOption label={opt.label} value={opt.value} key={index} />
      )}
    </ElSelect>
  },
  props: {
    options: createEditorTableProp('下拉选项', {
      options: [
        { label: '显示值', field: 'label' },
        { label: '绑定值', field: 'value' },
        { label: '备注', field: 'comments' },
      ],
      showKey: 'label'
    })
  },
  model: {
    default: '绑定字段'
  }
})

visualConfig.registry('number-range', {
  label: '数字范围输入组件',
  preview: () => <NumberRange />,
  render: ({ model, size }) => <NumberRange
    style={{ width: `${size.width}px` }}
    {...{
      start: model.start.value,
      'onUpdate:start': model.start.onChange,
      end: model.end.value,
      'onUpdate:end': model.end.onChange,
    }} />,
  model: {
    start: '起始绑定字段',
    end: '结束绑定字段',
  },
  resize: { width: true }
})

visualConfig.registry('image', {
  label: '图片',
  preview: () => <div class="editor-block-image">
    <i class="el-icon-picture-outline"></i>
  </div>,
  render: ({ props, size }) => <div class="editor-block-image"
    style={{ width: `${size.width}px`, height: `${size.height}px` }}>
    <img src={props.url ? props.url : 'https://cn.vuejs.org/images/logo.png'} />
  </div>,
  props: {
    url: createEditorInputProp('图片地址'),
  },
  resize: { width: true, height: true }
})